<template>
	<div style="background-color: black;">
		<div >
			<div :style="{backgroundImage:'url('+detail.backthumb+')'}" style="padding-bottom: 100px;">
				<div class="list">
					<u-parse :content="detail.content" @navigate="navigate" @tap="getUserInfo" :nickname="nickname"
						:avatar="avatar" :buttontext="buttontext" :showbutton="1" :avatarurl="timeslotavatar[0]"
						:avatarurl2="timeslotavatar[1]" noData="正在加载中..."></u-parse>
				</div>
				<div class="titletext">
					<button open-type='share' class='sharebutton radius shadow-blur'>
						<div class="shareview">分享给好友</div>
					</button>
					<button open-type='share' class='sharequn radius shadow-blur'>
						<div class="shareview">分享到群</div>
					</button>
				</div>
				<div class="more" :class="[isplaying?'playing':'']" @click="stopmusic">
					<image
						src="">
					</image>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import uParse from "@/components/feng-parse/parse.vue"

	export default {
		components: {
			uParse,
		},

		data() {
			return {
				detail: {
					content: ''
				},
				isplaying: true,
				from: 'list',
				musicsrc: '',
				innerAudioContext: [],
				ano: '04b40f3eaae86941',
				imgUrl: '',
				canvasshow: false,
				timeslotavatar: [],
				appheight: '',
				autoplay: false,
				interval: 0,
				duration: 600,
				cur: 0,
				nickname: '朋友',
				avatar: '',
				buttontext: '定制自己的个性祝福'
			};
		},
		onReady() {
			uni.hideTabBar();
		},
		onLoad(options) {
			// this.getArticleDetail(options.ano);
			this.getArticleDetail(this.ano);

			uni.getSystemInfo({
				success: (res) => {
					this.appheight = res.windowHeight;
				}
			})
		},

		onUnload: function() {
			//离开页面是停止播放音乐
			this.innerAudioContext.stop();
		},

		methods: {
			getArticleDetail(id) {
				const that = this;
				let data = {
					'ano': id
				};
				this.$apis.getArticleDetail(data).then(res => {
					console.log('res.detail', res.detail);
					if (res.detail) {
						that.detail = res.detail;
						that.ano = res.detail.ano;
						that.imgUrl = res.detail.floatthumb;
						that.timeslotavatar = res.timeslotavatar
						if (res.detail.floatthumb) {
							that.canvasshow = true;
							this.createStar(this.imgUrl)
						}
						this.startmusic(res.detail.music);

					} else {
						setTimeout(function() {

							wx.reLaunch({
								url: '/pages/index/index'
							})
						}, 500)
					}
				});
			},
			change(e) {
				console.log("Fdsadf")
				let thisPage = e.detail.current;
				this.cur = thisPage;
				console.log(this.cur);
			},

			getUserInfo() {
				// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
				wx.getUserProfile({
					desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						console.log(res)

					}
				})
			},
			startmusic(music) {
				let that = this;
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.autoplay = true;
				this.innerAudioContext.src = music;
				this.innerAudioContext.loop = true;
				this.innerAudioContext.onPlay(() => {
					console.log('开始播放');
				});


			},

			stopmusic() {
				if (this.isplaying) {
					this.innerAudioContext.pause();
					this.isplaying = false;
				} else {
					this.innerAudioContext.play();
					this.isplaying = true;
				}
			},
			// getUserInfo : function(e){
			// 				var that = this;  
			// 				 wx.getUserProfile({
			// 				        desc: '用来完善用户个人信息',//展示的消息
			// 				        success:(res)=>{
			// 				            console.log(res.userInfo)//将用户信息打印至控制台
			// 				           this.setData({ userinfor:res.userInfo})//将信息保存到定义的容器里
			// 				        }
			// 				      })
			// },

			createStar(imgUrl) {
				// #ifdef MP-WEIXIN
				let starImage = ''
				uni.getImageInfo({
					src: imgUrl,
					success: res => {
						starImage = res.path
					}
				})
				// #endif
				let {
					requestAnimationFrame
				} = this

				function Star(x, y, radius) {
					this.x = x
					this.y = y
					this.sx = 0
					this.sy = 0
					this.deg = 0
					this.radius = radius
					this.ax = Math.random() < 0.5 ? 0.01 : -0.01
				}
				Star.prototype.update = function() {
					const deltaDeg = Math.random() * 0.6 + 0.2
					this.sx += this.ax
					if (this.sx >= SPEED_LIMIT_X || this.sx <= -SPEED_LIMIT_X) {
						this.ax *= -1
					}
					if (this.sy < SPEED_LIMIT_Y) {
						this.sy += G
					}
					this.deg += deltaDeg
					this.x += this.sx
					this.y += this.sy
				}
				Star.prototype.draw = function() {
					const {
						radius
					} = this
					ctx.save()
					ctx.translate(this.x, this.y)
					ctx.rotate((this.deg * Math.PI) / 180)
					// #ifdef MP-WEIXIN
					ctx.drawImage(starImage, -radius, -radius * 1.8, radius * 5, radius * 5)
					// #endif
					// #ifdef MP-ALIPAY
					ctx.drawImage(imgUrl, -radius, -radius * 1.8, radius * 5, radius * 5)
					// #endif
					ctx.restore()
				}
				const stars = []
				// 下落的加速度
				const G = 5
				// 速度上限，避免速度过快
				const SPEED_LIMIT_X = 1
				const SPEED_LIMIT_Y = 1
				const W = uni.getSystemInfoSync().windowWidth
				const H = uni.getSystemInfoSync().windowHeight - 100
				const starCount = 100 // 星星总的数量
				let starNum = 0 // 隔多少个设定的毫秒数生成一个星星
				const deltaTime = 2 // 每次增加的星星数量
				const ctx = uni.createCanvasContext('myCanvas')
				let starAllBottom = 0 // 到达底部的星星数量
				let trueStarCount = 0 // 真正生成的星星数量
				const starLoop = () => {
					requestAnimationFrame = setTimeout(() => {
						starLoop()
					}, 1000 / 60)
					ctx.clearRect(0, 0, W, H)
					starNum += deltaTime
					if (starNum > starCount && trueStarCount < starCount) {
						stars.push(new Star(Math.random() * W, 0, Math.random() * 5 + 5))
						starNum %= starCount
						trueStarCount += 1
					}
					//if (isEmpty(stars)) return
					if (stars.length === 0)
						return
					stars.forEach((s, i) => {
						//重复绘制
						s.update()
						s.draw()
						if (s.y >= H) {
							//大于屏幕高度的就从数组里去掉
							starAllBottom += 1
							stars.splice(i, 1)
							if (starAllBottom === starCount) {
								clearTimeout(requestAnimationFrame)

							}
						}
					})
					ctx.draw()
				}
				starLoop()
			},


		},
		onShareAppMessage: function() {
			return {
				title: this.detail.sharetitle,
				path: '/pages/index/index?ano=' + this.detail.ano + '&from=share&t=' + this.fixedtime,
				imageUrl: this.detail.sharethumb,
				success: function(res) {
					// 转发成功
				},

			}
		},
	}
</script>

<style scoped>
	/*轮播*/

	.userinfo-avatar {
		overflow: hidden;
		display: block;
		width: 160rpx;
		height: 160rpx;
		margin: 20rpx;
		margin-top: 50rpx;
		border-radius: 50%;
		border: 2px solid #fff;
		box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
	}

	.userinfo {
		position: absolute;
		width: 350rpx;
		height: 320rpx;
		color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		top: 230rpx;
		left: 230px;
	}

	.avatarpic {

		position: absolute;

		left: 220px;
	}



	.share {
		display: flex;
		width: 100%;
		line-height: 64rpx;
		height: 120rpx;
		color: white;
		align-items: center;
		text-align: center;
		background: #000;
		justify-content: center;
		position: absolute;
		z-index: 9999;

	}

	.sharegif {
		width: 50rpx;
		height: 50rpx;

	}

	.shareview {

		display: flex;
		align-items: center;
		text-align: center;
		justify-content: center;
	}

	.detailtitle {
		display: flex;
		width: 100%;
		height: 114rpx;
		line-height: 94rpx;
		color: #000;
		margin-top: 44px;
		position: absolute;
		z-index: 9999;
		margin-bottom: 100px;

	}

	.sharebutton {
		background: #09bb07;
		color: #fff;
		line-height: 80rpx;
		float: left;
		left: 5%;
		width: 40%;
		border-radius: 5px;

		box-shadow: 0 0 5px rgb(0 0 0 / 10%);
	}

	.titletext {

		opacity: 1;
		height: 50rpx;
		color: white;
		font-size: 32rpx;
		width: 100%;
		position: fixed;
		bottom: 60rpx;


	}

	.sharequn {
		background: #e64340;
		color: #fff;
		float: right;
		right: 5%;
		line-height: 80rpx;
		width: 40%;
		border-radius: 5px;

		box-shadow: 0 0 5px rgb(0 0 0 / 10%);

	}

	.more {

		opacity: 1;
		height: 70rpx;
		color: white;
		width: 70rpx;
		position: absolute;
		right: 10rpx;
		top: 10%;



	}

	.playing {
		animation: rotate2d 2s linear infinite;
		-webkit-animation: rotate2d 2s linear infinite;
	}

	.control {
		opacity: 1;
		height: 50rpx;
		color: white;
		font-size: 32rpx;
		width: 7%;
		position: fixed;
		padding-left: 30rpx;
		right: 12rpx;
		top: 10%;

		background-size: contain;
		background-image: url("");


	}

	.play {

		opacity: 1;
		height: 50rpx;
		color: white;
		font-size: 32rpx;
		width: 7%;
		position: fixed;
		padding-left: 30rpx;
		right: 12rpx;
		top: 10%;

	}

	.swiper {
		height: 100vh;
	}

	.swiper-item {
		height: 100vh;
	}

	.more image {

		width: 70rpx;
		height: 70rpx;
	}

	canvas {
		width: 100%;
		min-height: 100vh;
		position: fixed;
		top: 0;
		z-index: 888;
	}

	@-webkit-keyframes rotate2d {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg)
		}

		to {
			-webkit-transform: rotate(1turn);
			transform: rotate(1turn)
		}
	}

	@keyframes rotate2d {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg)
		}

		to {
			-webkit-transform: rotate(1turn);
			transform: rotate(1turn)
		}
	}
</style>

<style>
	@import "@/static/css/animate.min.css";
</style>